<template>
	<view class="publish-page">
		<view class="top">
			<JyStatusBar></JyStatusBar>
			<JyTitleBar :title="title" :color="'#333'" :hasArrow="true" />
		</view>

		<view class="head">
			<view class="name">
				<view class="title">
					{{type == 'class' ? info.className : info.courseName}}
				</view>
				<view class="time">
					最近更新时间： {{info.updateTime}}
				</view>

			</view>
			<view class="right">
				<view class="num">
					{{info.publishNum}}
				</view>
				<view class="desc">
					{{type == 'class' ? '已发布班级' : '已发布科目'}}
				</view>
			</view>
		</view>

		<view class="course-list">
			<view class="course-item" v-for="item in list"
				:key=" item.updateTime" @click="goInfo(item)">
				<view class="item-head">
					<view class="left">
						<view class="icon">
							<view :class="[type == 'class' ? 'course' : 'class']">

							</view>
						</view>
						<view class="title">
							<view class="name">
								{{ type != 'class' ? item.className : item.courseName}}
							</view>
							<view class="time">{{item.updateTime}}</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="foot">
					<view
						:style="{color: item.classRank ? '#999999': '#FF8948', margin: '0 10rpx 0 0'}">
						班：{{item.classRank ? '已公布' : '未公布'}}
					</view>
					<view
						:style="{color: item.gradeRank ? '#999999': '#FF8948'}">
						级：{{item.gradeRank ? '已公布' : '未公布'}}
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import JyTitleBar from "@/components/jyTitleBar.vue";
	import JyStatusBar from "@/components/jyStatusBar.vue";

	import {
		publishDetail
	} from '@/pages/achievement/api/teacher.js'

	export default {
		components: {
			JyStatusBar,
			JyTitleBar,
		},
		data() {
			return {
				id: "",
				title: "",
				type: "",
				examId: "",
				info: {},
				list: [],
			};
		},
		onLoad(options) {
			if (options?.examId) {
				const { id, type, examId, item, title } = options
				this.id = id
				this.type = type
				this.examId = examId
				this.title = title
				this.info = JSON.parse(item)
				console.log(item)
				this.getList()
			}
		},
		methods: {
			async getList() {
				const data = {
					examId: this.examId
				}
				if (this.type == 'class') {
					data.classId = this.id
				} else {
					data.courseId = this.id
				}
				const data1 = await publishDetail(data);
				this.list = data1?.data?.list
				console.log(this.list)
			},
			goInfo(item) {
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/entry?classCourseId=${item.classCourseId}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.publish-page {
		height: 100vh;
		overflow: hidden;
		background: #f2f4f9;

		.top {
			width: 100%;
			height: 148rpx;
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 148rpx;
			background: linear-gradient(135deg, #7688ff, #4275fd);
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 20rpx 30rpx;
			color: #fff;
			font-size: 26rpx;
			opacity: 0.7;

			.name {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.title {
					font-size: 30rpx;
					opacity: 1;
					font-weight: 600;
					margin-bottom: 4rpx;
				}

				.time {
					color: #fff;
					font-size: 26rpx;
					opacity: 0.7;
				}


			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			.num {
				width: 56rpx;
				height: 56rpx;
				background: #ffffff;
				border-radius: 0px 8px 0px 8px;
				font-size: 36rpx;
				font-weight: 600;
				color: #4174fd;
				line-height: 56rpx;
				text-align: center;
				margin-bottom: 8rpx;
			}

			.desc {
				color: #fff;
				font-size: 26rpx;
				opacity: 0.7;
			}
		}

		.course-list {
			height: calc(100vh - 148rpx - 148rpx - 40rpx);
			overflow-y: scroll;
			padding: 0 30rpx;
		}


		.course-item {
			box-sizing: border-box;
			width: 100%;
			height: 210rpx;
			background: #fafafa;
			border-radius: 16px;
			margin-bottom: 20rpx;
			padding: 32rpx 24rpx;


			.item-head {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;


				.left {
					display: flex;
					justify-content: flex-start;
				}

				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
					margin-right: 16rpx;
					padding: 8rpx;

					.course {
						width: 48rpx;
						height: 48rpx;
						background: rgba(255, 137, 72, 0.08);
						background: url("@/pages/achievement/static/img/course-icon.png") 0 0 no-repeat;
						background-size: 100% 100%;
					}

					.class {
						width: 48rpx;
						height: 48rpx;
						background: rgba(65, 116, 253, 0.08);
						background: url("@/pages/achievement/static/img/class-icon.png") 0 0 no-repeat;
						background-size: 100% 100%;
					}
				}


				.name {
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 4rpx;
				}

				.time {
					height: 36rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
				}
			}

			.foot {
				display: flex;
				justify-content: flex-start;
			}
		}
	}
</style>
